import {Component, Input, OnInit} from '@angular/core';
import {UtilComponent} from '../../interface/util-component.interface';
import Map from 'ol/Map';
import View from 'ol/View.js';
import {getCenter} from 'ol/extent.js';
import TileLayer from 'ol/layer/Tile.js';
import {transformExtent} from 'ol/proj.js';
import Stamen from 'ol/source/Stamen.js';
import TileWMS from 'ol/source/TileWMS.js';
import XYZ from 'ol/source/XYZ';
import {DatePipe} from '@angular/common';

@Component({
    selector: 'kylin-smooth-reload',
    templateUrl: './smooth-reload.component.html',
    styleUrls: ['./smooth-reload.component.less'],
    providers: [DatePipe]
})
export class SmoothReloadComponent implements OnInit, UtilComponent {

    hasContent = true;
    map: Map;

    @Input() set data(val) {
        Object.assign(this, val);
    }

    extent = transformExtent([-126, 24, -66, 50], 'EPSG:4326', 'EPSG:3857');
    startDate: any;
    frameRate = 0.5; // frames per second
    animationId = null;
    layers: any;
    originView: any;
    dateString: string;

    constructor(private datePipe: DatePipe) {
        this.startDate = this.threeHoursAgo();
    }

    ngOnInit() {
        this.turnOn();
        this.setTime();
        this.updateInfo();
    }

    turnOn() {
        this.layers = [
            new TileLayer({
                source: new XYZ({
                    crossOrigin: 'anonymous',
                    url: 'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
                })
            }),
            new TileLayer({
                extent: this.extent,
                source: new TileWMS({
                    attributions: ['Iowa State University'],
                    url: 'https://mesonet.agron.iastate.edu/cgi-bin/wms/nexrad/n0r-t.cgi',
                    params: {'LAYERS': 'nexrad-n0r-wmst'}
                })
            })
        ];
        this.map.addLayer(this.layers[0]);
        this.map.addLayer(this.layers[1]);
        const view = this.map.getView();
        this.originView = {
            center: view.getCenter(),
            zoom: view.getZoom()
        };
        this.map.getView().setCenter(getCenter(this.extent));
        this.map.getView().setZoom(4);
    }

    turnOff() {
        this.map.removeLayer(this.layers[0]);
        this.map.removeLayer(this.layers[1]);
        const view = this.map.getView();
        view.setCenter(this.originView.center);
        view.setZoom(this.originView.zoom);
        if (this.animationId) {
            window.clearInterval(this.animationId);
        }
        /*this.originView = {
            center: view.getCenter(),
            zoom: view.getZoom()
        };*/
    }

    cancel(options?: any): any {
        this.turnOff();
    }

    threeHoursAgo() {
        return new Date(Math.round(Date.now() / 3600000) * 3600000 - 3600000 * 3);
    }

    updateInfo() {
        this.dateString = this.datePipe.transform(this.startDate, 'yyyy/MM/dd HH:mm:ss');
        // this.dateString = this.startDate.toISOString();
    }

    setTime = () => {
        this.startDate.setMinutes(this.startDate.getMinutes() + 15);
        if (this.startDate > Date.now()) {
            this.startDate = this.threeHoursAgo();
        }
        this.layers[1].getSource().updateParams({'TIME': this.startDate.toISOString()});
        this.updateInfo();
    }

    stop() {
        if (this.animationId !== null) {
            window.clearInterval(this.animationId);
            this.animationId = null;
        }
    };

    play() {
        this.stop();
        this.animationId = window.setInterval(this.setTime, 1000 / this.frameRate);
    };
}
